<template>
    <div class="pending-review-page" v-if="pendingReviewNum > 0">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多订单了">
        <!-- 遍历每个订单 -->
        <van-card v-for="(order, index) in orders" :key="index" :title="'第' + (index + 1) + '个订单'" :price="order.total_amount" v-show="order.order_status === 1">
          <template #tags>
            <van-tag type="warning">
              <span v-if="order.order_status === 1">待评价</span>
              <span v-else>{{ order.order_status }}</span>
            </van-tag>
            <div class="goods-list">
              <div v-for="(item, itemIndex) in order.items" :key="itemIndex" class="goods-item">
                <img :src="`http://127.0.0.1:8360/${item.goods.picture}`" alt="商品图片" class="goods-image" @click="router.push(`/goodsDetail/${item.goods_id}`)"/>
                <div class="goods-info">
                  <div class="goods-name">{{ item.goods.name }}</div>
                  <div class="goods-price">￥{{ item.goods.price }}</div>
                  <div class="goods-quantity">数量: {{ item.quantity }}</div>
                </div>
              </div>
            </div>
          </template>
  
          <template #footer>
            <div class="actions">
              <van-button type="primary" size="small" @click="navigateToReview(order.id)">
                立即评价
              </van-button>
            </div>
          </template>
        </van-card>
      </van-list>
    </div>
    <div v-else class="empty-orders">
      <van-empty description="暂无待评价订单" />
    </div>
</template>
  
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import useOrders from '@/stores/order.js';

const { getOrdersInfo, getPendedNum } = useOrders()
const orders = ref([]);
const router = useRouter();
const pendingReviewNum = ref(0);

onMounted(async () => {
  await onLoad();
});

// 加载待评价订单列表
const onLoad = async () => {
  orders.value = await getOrdersInfo();
  pendingReviewNum.value = await getPendedNum();
};

// 导航到评价页面
const navigateToReview = async (orderId) => {
  router.push(`/review/${orderId}`);
};
</script>
  
<style scoped>
.goods-list {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.goods-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.goods-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  margin-right: 10px;
}

.goods-info {
  flex-grow: 1;
}

.goods-name {
  font-weight: bold;
}

.goods-price {
  color: #f56c6c;
}

.goods-quantity {
  font-size: 12px;
  color: #888;
}

.empty-orders {
  text-align: center;
  margin-top: 50px;
}
</style>
  